<ng-container *ngIf="listView == 'grid'">
    <div class="box-view">
        <div class="row-ex">
            <div cdkDropList [class.selected]="document.isRightClicked" (contextmenu)="onContextMenu($event, document, i)" [cdkDropListDisabled]="disabled" id="document{{ i }}" [cdkDropListData]="document" class="col-ex-5" [appDragDrop]="selectFolder" [rootFolder]="rootFolder" *ngFor="let document of documents; let i = index; trackBy: trackById">
                <div style="visibility: hidden; position: fixed" [style.left.px]="contextMenuPosition.x" [style.top.px]="contextMenuPosition.y" #documentMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="documentMenuRight"></div>
                <div cdkDrag [cdkDragDisabled]="disabled" [cdkDragData]="document" class="position-relative show-on-hover">
                    <div *ngIf="disabled" (click)="onDocumentView(document)" class="material-icons f-icon text-main" role="button">
                        <img [src]="document.thumbnailPath" alt="" class="mr-2 grid-img" />
                    </div>
                    <div *ngIf="!disabled" (dblclick)="onDocumentView(document)" (click)="onClickDocument(document)" class="material-icons f-icon text-main" role="button">
                        <img [src]="document.thumbnailPath" alt="" class="mr-2 grid-img" />
                    </div>
                    <div *ngIf="disabled" role="button" class="text-dark fw-600" (click)="onDocumentView(document)">
                        {{ document.name | limitTo : 25 }}
                    </div>
                    <div *ngIf="!disabled" role="button" class="text-dark fw-600" (click)="onClickDocument(document)" (dblclick)="onDocumentView(document)">
                        {{ document.name | limitTo : 25 }}
                    </div>
                    <div class="hover-data">
                        <div class="c-box">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <mat-checkbox #checkboxes color="primary" (change)="addOrRemoveDocumentId(document.id, $event)"></mat-checkbox>
                            </div>
                        </div>
                        <div class="m-icon">
                            <button mat-icon-button color="primary" matTooltip="更多" [matMenuTriggerFor]="documentMenu" aria-label="Menu">
                                <mat-icon>more_horiz</mat-icon>
                            </button>
                            <mat-menu #documentMenu="matMenu">
                                <button mat-menu-item (click)="onShared(document, 'file')">
                                    <mat-icon>shared</mat-icon>
                                    共享
                                </button>
                                <button mat-menu-item (click)="onCreateShareableLink(document)">
                                    <mat-icon>link</mat-icon>
                                    生成共享链接
                                </button>
                                <button mat-menu-item (click)="onDocumentView(document)">
                                    <mat-icon>remove_red_eye</mat-icon>
                                    预览
                                </button>
                                <ng-container *ngIf="isCopy">
                                    <button mat-menu-item (click)="onCopied(document)">
                                        <mat-icon>content_copy</mat-icon>
                                        拷贝
                                    </button>
                                </ng-container>
                                <ng-container *ngIf="isMove">
                                    <button mat-menu-item (click)="onMoved(document)">
                                        <mat-icon>zoom_out_map</mat-icon>
                                        移动
                                    </button>
                                </ng-container>
                                <button mat-menu-item (click)="onDownload(document)">
                                    <mat-icon>download</mat-icon>
                                    下载
                                </button>
                                <button mat-menu-item (click)="sendEmail(document)">
                                    <mat-icon>forward_to_inbox</mat-icon>
                                    发送邮件
                                </button>
                                <button mat-menu-item (click)="renameDocument(document)">
                                    <mat-icon>edit</mat-icon>
                                    重命名
                                </button>
                                <button mat-menu-item (click)="onCommentClick(document)">
                                    <mat-icon>chat</mat-icon>
                                    评论
                                </button>
                                <button mat-menu-item (click)="deleteDocument(document)">
                                    <mat-icon>delete</mat-icon>
                                    删除
                                </button>
                                <button mat-menu-item (click)="toggleDocumentStarred(document)">
                                    <ng-container *ngIf="document.isStarred">
                                        <mat-icon class="material-icons">grade</mat-icon>
                                        移除关注
                                    </ng-container>
                                    <ng-container *ngIf="!document.isStarred">
                                        <mat-icon class="material-icons-outlined">grade</mat-icon>
                                        添加关注
                                    </ng-container>
                                </button>
                                <button mat-menu-item (click)="onVersionHistoryClick(document)">
                                    <mat-icon>history</mat-icon>
                                    版本历史
                                </button>
                            </mat-menu>
                        </div>
                        <div class="star-icon">
                            <i class="fas fa-star mr-2" matTooltip="取消关注" role="button" (click)="toggleDocumentStarred(document)" *ngIf="document.isStarred"></i>
                            <i class="far fa-star mr-2" role="button" matTooltip="添加关注" (click)="toggleDocumentStarred(document)" *ngIf="!document.isStarred"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-container>

<ng-container *ngIf="listView == 'list'">
    <ul class="list-group list-group-flush">
        <li cdkDropList [class.selected]="document.isRightClicked" (contextmenu)="onContextMenu($event, document)" id="document{{ i }}" [cdkDropListDisabled]="disabled" [cdkDropListData]="document" class="list-group-item px-0" [appDragDrop]="selectFolder" [rootFolder]="rootFolder" *ngFor="let document of documents; let i = index; trackBy: trackById">
            <div style="visibility: hidden; position: fixed" [style.left.px]="contextMenuPosition.x" [style.top.px]="contextMenuPosition.y" #documentMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="documentMenuRight"></div>
            <div cdkDrag [cdkDragDisabled]="disabled" [cdkDragData]="document" class="row align-items-center m-0">
                <div class="col-md-auto col-auto">
                    <mat-checkbox #checkboxes color="primary" (change)="addOrRemoveDocumentId(document.id, $event)"></mat-checkbox>
                </div>
                <div class="col-md col">
                    <div *ngIf="disabled" (click)="onDocumentView(document)" class="d-flex align-items-center" role="button">
                        <img [src]="document.thumbnailPath" [alt]="document.name" class="mr-2 list-img" />
                        {{ document.name | limitTo : 25 }}
                    </div>
                    <div *ngIf="!disabled" (click)="onClickDocument(document)" (dblclick)="onDocumentView(document)" class="d-flex align-items-center" role="button">
                        <img [src]="document.thumbnailPath" [alt]="document.name" class="mr-2 list-img" />
                        {{ document.name | limitTo : 25 }}
                    </div>
                </div>
                <div class="col-md-3 col-auto d-md-flex d-none">
                    <i class="fas fa-star mr-2" matTooltip="取消关注" role="button" (click)="toggleDocumentStarred(document)" *ngIf="document.isStarred"></i>
                    <i class="far fa-star mr-2" role="button" matTooltip="添加关注" (click)="toggleDocumentStarred(document)" *ngIf="!document.isStarred"></i>
                    {{ document.modifiedDate | date : 'dd/MM/yyyy hh:mm a' }}
                </div>
                <div class="col-md-2 d-md-flex d-none">
                    <ng-container *ngIf="document.users.length <= 1">
                        <span>仅自己</span>
                    </ng-container>
                    <ng-container *ngIf="document.users.length > 1">
                        <span [matTooltip]="getTooltip(document.users)">{{ document.users.length }} Members</span>
                    </ng-container>
                </div>
                <div class="col-md-auto col-auto">
                    <button mat-icon-button color="primary" matTooltip="更多" [matMenuTriggerFor]="documentMenu" aria-label="Menu">
                        <mat-icon>more_horiz</mat-icon>
                    </button>
                    <mat-menu #documentMenu="matMenu">
                        <button *hasClaim="'IsSharedFileFolder'" mat-menu-item (click)="onShared(document, 'file')">
                            <mat-icon>shared</mat-icon>
                            共享
                        </button>
                        <button *hasClaim="'IsSharedLink'" mat-menu-item (click)="onCreateShareableLink(document)">
                            <mat-icon>link</mat-icon>
                            生成共享链接
                        </button>
                        <button mat-menu-item (click)="onDocumentView(document)">
                            <mat-icon>remove_red_eye</mat-icon>
                            预览
                        </button>
                        <ng-container *ngIf="isCopy">
                            <button *hasClaim="'IsCopyFile'" mat-menu-item (click)="onCopied(document)">
                                <mat-icon>content_copy</mat-icon>
                                拷贝
                            </button>
                        </ng-container>
                        <ng-container *ngIf="isMove">
                            <button *hasClaim="'IsMoveFile'" mat-menu-item (click)="onMoved(document)">
                                <mat-icon>zoom_out_map</mat-icon>
                                移动
                            </button>
                        </ng-container>
                        <button *hasClaim="'IsDownloadFile'" mat-menu-item (click)="onDownload(document)">
                            <mat-icon>download</mat-icon>
                            下载
                        </button>
                        <button *hasClaim="'IsSendEmail'" mat-menu-item (click)="sendEmail(document)">
                            <mat-icon>forward_to_inbox</mat-icon>
                            发送邮件
                        </button>
                        <button *hasClaim="'IsRenameFile'" mat-menu-item (click)="renameDocument(document)">
                            <mat-icon>edit</mat-icon>
                            重命名
                        </button>
                        <button mat-menu-item (click)="onCommentClick(document)">
                            <mat-icon>chat</mat-icon>
                            评论
                        </button>
                        <button *hasClaim="'IsDeleteFileFolder'" mat-menu-item (click)="deleteDocument(document)">
                            <mat-icon>delete</mat-icon>
                            删除
                        </button>
                        <button mat-menu-item (click)="toggleDocumentStarred(document)">
                            <ng-container *ngIf="document.isStarred">
                                <mat-icon class="material-icons">grade</mat-icon>
                                移除关注
                            </ng-container>
                            <ng-container *ngIf="!document.isStarred">
                                <mat-icon class="material-icons-outlined">grade</mat-icon>
                                添加关注
                            </ng-container>
                        </button>
                        <button mat-menu-item (click)="onVersionHistoryClick(document)">
                            <mat-icon>history</mat-icon>
                            版本历史
                        </button>
                    </mat-menu>
                </div>
            </div>
            <div class="showme" *hasClaim="'IsSharedFileFolder'" (click)="onShared(document, 'file')">
                <span class="material-icons-outlined text-main cursor-pointer">share</span>
            </div>
        </li>
    </ul>
</ng-container>
<mat-menu #documentMenuRight="matMenu">
    <ng-template matMenuContent let-document="document" let-type="type">
        <button *hasClaim="'IsSharedFileFolder'" mat-menu-item (click)="onShared(document, type)">
            <mat-icon>shared</mat-icon>
            共享
        </button>
        <button *hasClaim="'IsSharedLink'" mat-menu-item (click)="onCreateShareableLink(document)">
            <mat-icon>link</mat-icon>
            生成共享链接
        </button>
        <button mat-menu-item (click)="onDocumentView(document)">
            <mat-icon>remove_red_eye</mat-icon>
            预览
        </button>
        <ng-container *ngIf="isCopy">
            <button *hasClaim="'IsCopyFile'" mat-menu-item (click)="onCopied(document)">
                <mat-icon>content_copy</mat-icon>
                拷贝
            </button>
        </ng-container>
        <ng-container *ngIf="isMove">
            <button *hasClaim="'IsMoveFile'" mat-menu-item (click)="onMoved(document)">
                <mat-icon>zoom_out_map</mat-icon>
                移动
            </button>
        </ng-container>
        <button *hasClaim="'IsDownloadFile'" mat-menu-item (click)="onDownload(document)">
            <mat-icon>download</mat-icon>
            下载
        </button>
        <button *hasClaim="'IsSendEmail'" mat-menu-item (click)="sendEmail(document)">
            <mat-icon>forward_to_inbox</mat-icon>
            发送邮件
        </button>
        <button *hasClaim="'IsRenameFile'" mat-menu-item (click)="renameDocument(document)">
            <mat-icon>edit</mat-icon>
            重命名
        </button>
        <button mat-menu-item (click)="onCommentClick(document)">
            <mat-icon>chat</mat-icon>
            评论
        </button>
        <button *hasClaim="'IsDeleteFileFolder'" mat-menu-item (click)="deleteDocument(document)">
            <mat-icon>delete</mat-icon>
            删除
        </button>
        <button mat-menu-item (click)="toggleDocumentStarred(document)">
            <ng-container *ngIf="document.isStarred">
                <mat-icon class="material-icons">grade</mat-icon>
                移除关注
            </ng-container>
            <ng-container *ngIf="!document.isStarred">
                <mat-icon class="material-icons-outlined">grade</mat-icon>
                添加关注
            </ng-container>
        </button>
        <button mat-menu-item (click)="onVersionHistoryClick(document)">
            <mat-icon>history</mat-icon>
            版本历史
        </button>
    </ng-template>
</mat-menu>
